<template>
  <div class="container">
    <!-- header -->
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>物业服务</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/EventManagement' }">
          活动管理
        </el-breadcrumb-item>
      </el-breadcrumb>
      <h1>活动管理</h1>
    </div>
    <!-- search-box -->
    <div class="search-box">
      <el-form :model="searchData">
        <el-form-item label="活动标题">
          <el-input v-model="searchData.activityTitle" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- list -->
    <div class="list">
      <div class="list-title">
        <div>活动列表</div>
        <div class="operation-box">
          <el-button type="primary" @click="newEvent">+ 新建</el-button>
          <el-button type="default">批量操作</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        stripe
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column property="id" type="selection" width="55" />
        <el-table-column property="activityTitle" label="活动标题" width="250">
          <template #default="scope">{{ scope.row.activityTitle }} </template>
        </el-table-column>
        <el-table-column
          property="author"
          label="作者"
          width="128"
          align="center"
        />
        <el-table-column property="status" label="发布状态" />
        <el-table-column property="views" label="浏览量" />
        <el-table-column property="publisher" label="发布人" />
        <el-table-column width="152" property="releaseDate" label="发布日期" />
        <el-table-column label="操作" width="130">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              text
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="primary"
              text
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="list-footer">
        <Page
          :total="total"
          :count="count"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Page from '../../../components/Page.vue';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
const searchData = reactive({
  activityTitle: '',
});
const processingStatusOption = [
  { label: '待处理', value: '待处理' },
  { label: '进行中', value: '进行中' },
  { label: '已完成', value: '已完成' },
];

const onSubmit = () => {
  console.log('submit!');
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};

//table
const cellStyle = ref({ height: '60px', fontSize: '15px' });
const headerStyle = ref({ height: '60px', fontSize: '15px', color: 'black' });
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const newEvent=()=>{
  router.push({path:'/home/NewActivity'})
}
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
  router.push({path:'/home/NewActivity'})

};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};
const tableData = ref<User[]>([]);
const page = ref(1);
const total = ref(0);
const count = ref(5);
interface User {
  id: number;
  activityTitle: string;
  author: string;
  status: string;
  views: number;
  publisher: string;
  releaseDate: string;
}
const getData = () => {
  axios({
    url: '/activity/list',
    params: {
      params: {},
      page: page.value,
      limit: count.value,
      title: searchData.activityTitle,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      total.value = data.total;
      let arr: User[] = [];
      data.data.forEach((v) => {
        arr.push({
          id: v.id,
          activityTitle: v.title,
          author: v.author.authorType,
          status: v.string,
          views: v.number,
          publisher: v.string,
          releaseDate: v.date,
        });
      });
      tableData.value = arr;
    } else {
      ElMessage.error('加载失败！');
    }
  });
};
const handleSizeChange = (val: number) => {
  count.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  page.value = val;
  getData();
};
onMounted(() => {
  getData();
});
//page
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  .header {
    width: 1136px;
    height: 97px;
    background: #fff;
    margin-top: 25px;
    border-bottom: 1px solid #f0f2f5;
    .el-breadcrumb {
      height: 37px;
      line-height: 37px;
      font-size: 14px;
      margin-left: 30px;
      :deep(.el-breadcrumb__item:first-child .el-breadcrumb__inner) {
        color: #aaadb4;
      }
    }
    h1 {
      height: 60px;
      line-height: 60px;
      margin-left: 30px;
      font-family: 'Microsoft Tai Le Bold', 'Microsoft Tai Le', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
    }
  }
  .search-box {
    width: 1136px;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form {
      width: 95%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      .el-form-item {
        width: 300px;
        display: flex;
        align-items: center;
        margin-bottom: 0;
        :deep(.el-form-item__content) {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
  }
  .list {
    width: 1136px;
    background: #fff;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .list-title {
      width: 95%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 16px;
        line-height: 28px;
      }
    }
    .list-footer {
      width: 95%;
      height: 100px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
